<template>
    <div>
        <van-search v-model="value" placeholder="请输入搜索关键词" />
        <div class="searchBox">
            <ul class="hotSearchList">
                <h4>热门搜索</h4>
                <li>1214255</li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <ul class="searchContentList">
                <li>
                    <van-icon name="clock-o" />&nbsp;
                    <span>哈哈哈哈哈哈哈</span>
                    <van-icon name="cross" class="delete" />
                </li>
                <li>
                    <van-icon name="clock-o" />
                    <span>哈哈哈哈哈哈哈</span>
                    <van-icon name="cross" class="delete" />
                </li>
                <li>
                    <van-icon name="clock-o" />
                    <span>哈哈哈哈哈哈哈</span>
                    <van-icon name="cross" class="delete" />
                </li>
                <li>
                    <van-icon name="clock-o" />
                    <span>哈哈哈哈哈哈哈</span>
                    <van-icon name="cross" class="delete" />
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
// import { defineComponent } from '@vue/composition-api'

export default {
    name:"search",
    data() {
    return {
      value: '',
    };
  },
}
</script>
<style scoped lang="less">
.searchBox {

}
.hotSearchList {
    width: 90%;
    margin-left: 10px;
    overflow: hidden;
}
.hotSearchList>li {
    margin-bottom: 8px;
    margin-right: 8px;
    float: left;
    width: 80px;
    height: 20px;
    line-height: 20px;
    border-radius: 25px;
    border: 1px solid #999;
    padding: 10px 10px;
}
.delete {
    float: right;
}
.searchContentList {
    width: 96%;
    margin: auto;
}
.searchContentList>li {
    padding: 14px 5px;
    height: 20px;
    border-bottom: 1px solid #999;
    color: #555;
}
</style>
